import React from 'react'
import { Link, Route } from 'react-router-dom'
import RouteCuard from './RouteCuard'

function PageA() {
    return <h1>PageA</h1>
}

function PageB() {
    return <h1>PageB</h1>
}

export default function App() {
    return (
        <RouteCuard
            onChange={(prevLocation, location, action, unListen) => {
                console.log(`日志：从页面${prevLocation.pathname}进入页面${location.pathname}，进入方式${action}`);
                // unListen() // 取消监听
            }}
            onBeforeChange={(prevLocation, loation, action, done, unBlock) => {
                console.log(`页面从${prevLocation.pathname}跳转到${loation.pathname},跳转方式${action}`);
                done(true)
                // unBlock() // 取消阻塞
            }}
        >
            {/* ul>li*2>Link{页面} */}
            <ul>
                <li>
                    <Link to="/pageA" >页面A</Link>
                </li>
                <li>
                    <Link to="/pageB" >页面B</Link>
                </li>
            </ul>

            <Route path="/pageA" component={PageA} />
            <Route path="/pageB" component={PageB} />
        </RouteCuard >
    )
}
